import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Table, Spin, Form, Row, Col, Input, Button, Icon, Card, Radio, Progress } from 'antd'
import moment from 'moment'
import _ from 'lodash'

import Ajax from 'lib/Ajax'
import { mapColor } from 'lib/fun'

function createMarkup(html) { return {__html: html}; };

class ModuleName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      news: {},
      loading: false
    }
  }

  componentDidMount(){
    this.loadData(this.props.params.id);
  }

  componentWillReceiveProps(nextProps){
    this.loadData(nextProps.params.id);
  }

  loadData = (id)=>{
    var self = this;
    self.setState({
      loading: true
    });
    Ajax({
      url: '/news/get',
      data: {
        newsId: id
      },
      success: function(data){
        self.setState({
          loading: false,
          news: data
        });
      },
      error: function(error){
        self.setState({
          loading: false
        });
        message.error(error);
      }
    });
  }

  render() {
    const { news } = this.state;

    return (
      <Spin spinning={this.state.loading}>
        <div className="news">
          <h2 className="title">{news.title}</h2>
          <div className="desc">
            <span>新闻类型：{news.newsType}</span>
            <span>新闻标签：{news.tags}</span>
            <span>创建时间：{news.createTime}</span>
          </div>
          <div className="content" dangerouslySetInnerHTML={createMarkup(news.content)}></div>
        </div>
      </Spin>
    )
  }
}

module.exports = connect()(ModuleName)
